<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
  .el-table thead {
    color: #333;
  }</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->

    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="editForm.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="editForm.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column fixed align="center" min-width="100" label="流水号" prop="serialNo"/>
      <el-table-column align="center" min-width="110" label="银行账户号" prop="account"/>
      <el-table-column align="center" min-width="110" label="交易时间" prop="tradeTime"/>
      <el-table-column align="center" min-width="100" label="收付方向" prop="payRecv">
        <template slot-scope="scope">
          <el-tag>{{{"0":"收款","1":"付款"}[scope.row.payRecv]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="金额(元)" prop="money"/>
      <el-table-column align="center" min-width="110" label="收款账号" prop="recvAccount"/>
      <el-table-column align="center" min-width="100" label="收款户名" prop="recvAccountName"/>
      <el-table-column align="center" min-width="100" label="付款联行号" prop="payBankNo"/>
      <el-table-column align="center" min-width="100" label="付款银行名称" prop="payBankName"/>
      <el-table-column align="center" min-width="100" label="支付结果" prop="payResult">
        <template slot-scope="scope">
          <el-tag>{{{"0":"正在处理","1":"成功","2":"失败"}[scope.row.payResult]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="110" label="对账状态" prop="recoState">
        <template slot-scope="scope">
          <el-tag>{{{"0":"未对账","1":"已对账"}[scope.row.recoState]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="对账结果" prop="recoResult">
        <template slot-scope="scope">
          <el-tag>{{{"0":"成功","1":"未知","2":"失败","3":"平台与银行未匹配"}[scope.row.recoResult]}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import {cities} from '@/utils/base'
    import {parseTime} from '@/utils'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission' // 权限判断函数

    export default {
        name: 'correlation',
        components: {Pagination},
        filters: { },
        data() {
            return {
                list: [],
                total: 0,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                    account: undefined
                },
                dialogStatus: 'create',
                editForm: {
                    serialNo: undefined,
                    account: undefined,
                    voucherNo: undefined,
                    orderNo: undefined,
                    tradeTime: undefined,
                    payRecv: undefined,
                    currency: undefined,
                    money: undefined,
                    recvAccount: undefined,
                    recvAccountName: undefined,
                    recvBankNo: undefined,
                    recvBankName: undefined,
                    payAccount: undefined,
                    payAccountName: undefined,
                    payBankNo: undefined,
                    payBankName: undefined,
                    usage: undefined,
                    abstract: undefined,
                    postscript: undefined,
                    payResult: undefined,
                    reason: undefined,
                    recoState: undefined,
                    recoResult: undefined,
                    recoRemark: undefined,
                    startTime: undefined,
                    endTime: undefined
                },
                id: undefined,
                account: undefined, // 指定账户号
            }
        },
        created() {
            if (this.$route.query.account == null) {
                return
            }
            const account = this.$route.query.account
            this.getList(account)
        },
        methods: {
            checkPermission,
            // 获取银行流水列表
            getList(account) {
                this.listLoading = true
                doGet('statistics.html?op=getCorrSerial', {...this.listQuery, account} ).then(response => {
                    this.list = response.rows
                    this.total = response.data.totalcount
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            // 查询银行流水
            doQuery() {
                this.getList()
            },
        }
    }
</script>
